import React from "react";
import "./orderList.scss";
import "../../assest/style/common.css";
import { Link } from "react-router-dom";
import { NavBar, Space, Toast } from "antd-mobile";
import { UserOutline } from "antd-mobile-icons";
function orderList() {
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <UserOutline />
      </Space>
    </div>
  );

  const back = () =>
    Toast.show({
      content: "点击了返回区域",
      duration: 1000,
    });

  return (
    <div className="app my-orderlist">
      {/* 头部导航栏 */}
      <NavBar right={right} back="返回" onBack={back}>
        订单列表
      </NavBar>
      {/* 订单列表 */}
      <ul>
        <Link to="/my/orderDetail" className="list flex fdc">
          <div className="list-top">
            <h4 className="name">大鹏所城·古城边8房复古风民宿</h4>
            <h4 className="paying">待支付</h4>
          </div>
          <div className="list-mide">
            <img
              src="https://img.villaday.com//images/house_223/21727/21727-10-14498216.jpg"
              alt=""
            />
            <div className="mide-right">
              <p>
                <span className="mide-right-l">入住日期:</span>
                <span className="mide-right-r">2002-03-23</span>
              </p>

              <p>
                <span className="mide-right-l">退房日期:</span>
                <span className="mide-right-r">2002-03-23</span>
              </p>
              <p className="">
                <span className="mide-right-l">订单单号:</span>
                <span className="mide-right-r">12334534546546</span>
              </p>
              <p className="">
                <span className="mide-right-l">订单总价:</span>
                <span className="mide-right-r">￥49993.00</span>
              </p>
            </div>
          </div>
          <div className="bottom">
            <span className="list-buttom">订单详情</span>
            <span className="list-buttom">联系客服</span>
            <span className="list-buttom">取消订单</span>
            <span className="list-buttom last">立即支付</span>
          </div>
        </Link>
        <li className="list">
          <div className="list-top">
            <h4 className="name">大鹏所城·古城边8房复古风民宿</h4>
            <h4 className="paying">待支付</h4>
          </div>
          <div className="list-mide">
            <img
              src="https://img.villaday.com//images/house_223/21727/21727-10-14498216.jpg"
              alt=""
            />
            <div className="mide-right">
              <p>
                <span className="mide-right-l">入住日期:</span>
                <span className="mide-right-r">2002-03-23</span>
              </p>

              <p>
                <span className="mide-right-l">退房日期:</span>
                <span className="mide-right-r">2002-03-23</span>
              </p>
              <p className="">
                <span className="mide-right-l">订单单号:</span>
                <span className="mide-right-r">12334534546546</span>
              </p>
              <p className="">
                <span className="mide-right-l">订单总价:</span>
                <span className="mide-right-r">￥49993.00</span>
              </p>
            </div>
          </div>
          <div className="bottom">
            <span className="list-buttom">订单详情</span>
            <span className="list-buttom">联系客服</span>
            <span className="list-buttom">取消订单</span>
            <span className="list-buttom last">立即支付</span>
          </div>
        </li>
      </ul>
    </div>
  );
}

export default orderList;
